<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块快捷预览</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.5/vue.js"></script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .htmlview {
            display: flex;
            flex-wrap: wrap;
            padding-right: 50px;
            padding-top: 60px;
        }

        a {
            text-decoration: none;
        }

        iframe html body::-webkit-scrollbar {
            display: none;
        }

        .htmlview>.iframe {
            width: 33.3%;
            height: 500px;
            padding: 5px;
            background-color: beige;
            box-sizing: border-box;
        }

        .htmlview>.iframe iframe {
            width: 100%;
            height: 450px;
        }

        .htmlview>.iframe .ifh2 {
            text-align: center;
            line-height: 20px;
            color: red;
        }

        .filter {
            background-color: bisque;
            height: 60px;
            display: flex;
            justify-content: center;
            width: 100%;
            position: fixed;
            align-items: center;
        }

        .path_browse {
            width: 50%;
            padding: 0 30px;
            display: flex;
        }

        .path_browse svg {
            float: right;
            width: 30px;
            margin-left: -30px;
            height: 30px;
        }

        .filter input[type="text"] {
            width: 100%;
            height: 30px;
            padding: 0 20px;
            border: 1px solid rgb(150, 150, 150);
            outline: none;
            background-color: aliceblue;
            border-radius: 5px;
        }

        .load_html {
            float: right;
            display: block;
            border: none;
            margin: auto 20px;
            padding: 10px 30px;
            background-color: aquamarine;
        }

        .dir_list {
            position: absolute;
            width: 50%;
            background-color: white;
            box-shadow: 0 0 5px 1px #8c7f7f;
            margin-top: 32px;
            overflow: auto;
            max-height: 800px;
        }

        .dir_item {
            padding: 10px 30px;
            line-height: 30px;
            cursor: pointer;
        }

        .dir_item svg {
            float: left;
            margin: 0 10px;
        }

        .dir_item:hover {
            background-color: rgb(209, 209, 209);
        }
    </style>
</head>

<body>
    <div class="filter">
        <div class="path_browse" id="path_browse">
            <input type="text" name="" id="path" v-on:click="showList" placeholder="D:/model space/" v-model="value">
            <svg t="1618276810228" v-on:click="showList" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2157" width="48" height="48">
                <path
                    d="M163.446154 275.692308h697.107692c19.692308 0 33.476923 25.6 17.723077 43.323077L537.6 736.492308c-11.815385 15.753846-37.415385 15.753846-49.230769 0L143.753846 319.015385c-13.784615-17.723077-1.969231-43.323077 19.692308-43.323077z"
                    p-id="2158"></path>
            </svg>
            <div class="dir_list" id="dir_list" v-bind:style="{display:displayState}">
                <div class="dir_item" v-for="file in fileList" v-on:click="selectFile(file.fileName,file.fileType)">
                    <div v-if="file.fileType==-1">
                        <svg t="1618277354164" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7405" width="48" height="48">
                            <path
                                d="M522.581333 704.896c-17.066667 0-32-14.933333-32-32l2.133334-448c0-17.066667 14.933333-32 32-32 19.2 0 34.133333 12.8 34.133333 32l-2.133333 448c-2.133333 17.066667-17.066667 32-34.133334 32z"
                                fill="#548DFF" p-id="7406"></path>
                            <path
                                d="M375.381333 372.096c-8.533333 0-17.066667-2.133333-23.466666-8.533333-12.8-12.8-12.8-32 0-44.8l149.333333-149.333334c12.8-12.8 32-12.8 44.8 0l149.333333 149.333334c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0l-125.866666-125.866667-125.866667 125.866667c-6.4 6.4-14.933333 8.533333-23.466667 8.533333z"
                                fill="#548DFF" p-id="7407"></path>
                            <path
                                d="M746.666667 885.333333H298.666667c-87.466667 0-160-72.533333-160-160v-196.266666c0-72.533333 59.733333-134.4 134.4-134.4h102.4c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32h-102.4c-38.4 0-70.4 32-70.4 70.4V725.333333c0 53.333333 42.666667 96 96 96h448c53.333333 0 96-42.666667 96-96v-198.4c0-36.266667-29.866667-68.266667-68.266667-68.266666h-100.266667c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h100.266667c72.533333 0 132.266667 59.733333 132.266667 132.266666V725.333333c0 87.466667-72.533333 160-160 160z"
                                fill="#111111" p-id="7408"></path>
                        </svg>
                    </div>
                    <div v-if="file.fileType==1">
                        <svg t="1618277416320" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8249" width="48" height="48">
                            <path d="M273.385972 391.348106l477.228055 0 0 59.684334-477.228055 0 0-59.684334Z"
                                p-id="8250"></path>
                            <path d="M273.385972 510.630816l477.228055 0 0 59.686381-477.228055 0 0-59.686381Z"
                                p-id="8251"></path>
                            <path d="M273.385972 630.005624l477.228055 0 0 59.598376-477.228055 0 0-59.598376Z"
                                p-id="8252"></path>
                            <path d="M273.385972 749.290381l477.228055 0 0 59.687404-477.228055 0 0-59.687404Z"
                                p-id="8253"></path>
                            <path
                                d="M810.301432 898.460796 213.698568 898.460796 213.698568 331.661725l208.815863 0L422.514431 122.867352l387.788024 0L810.302455 898.460796zM362.870006 272.040836 253.37215 272.040836l109.497856-109.541859L362.870006 272.040836zM377.770368 63.224973 154.057213 286.917662l0 671.143557 715.885574 0L869.942787 63.224973 377.770368 63.224973z"
                                p-id="8254"></path>
                            <path d="M482.157833 272.040836l268.456195 0 0 59.620889-268.456195 0 0-59.620889Z"
                                p-id="8255"></path>
                        </svg>
                    </div>
                    <div v-if="file.fileType==0">
                        <svg t="1618277445795" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8451" width="48" height="48">
                            <path
                                d="M400.128 213.333333c25.472 0 49.92 10.453333 67.925333 29.013334l67.84 70.101333h221.44c53.034667 0 96 44.373333 96 99.072v342.698667C853.333333 808.96 810.368 853.333333 757.333333 853.333333H224C170.965333 853.333333 128 808.96 128 754.218667V312.448C128 257.706667 170.965333 213.333333 224 213.333333h176.128z m0 66.048H224a32.554667 32.554667 0 0 0-32 33.066667v441.770667c0 18.261333 14.336 33.066667 32 33.066666h533.333333c17.664 0 32-14.805333 32-33.066666V411.52a32.554667 32.554667 0 0 0-32-33.024h-234.666666a31.402667 31.402667 0 0 1-22.613334-9.685333L422.826667 289.066667a31.488 31.488 0 0 0-22.698667-9.685334zM629.333333 640a32 32 0 1 1 0 64h-277.333333a32 32 0 1 1 0-64h277.333333z"
                                fill="#000000" p-id="8452"></path>
                        </svg>
                    </div>
                    {{file.fileName}}
                </div>
            </div>
        </div>
        <button class="load_html" id="load_html">加载</button>
    </div>
    <div class="htmlview" id="htmlview">
    </div>
    <script>
        //getHtmls('/jc_template/img_collection（图片合集）/')
        function getHtmls(dir) {
            fetch('/gethtmls?dir=' + dir, { method: 'GET' })
                .then(res => {
                    res.json().then(data => {
                        //console.log(data)
                        data.forEach(element => {
                            let view = document.getElementById('htmlview')
                            let iframe = document.createElement('iframe')
                            let ifContainer = document.createElement('div')
                            let href = document.createElement('a')
                            href.target = '_blank'
                            let path = '/htmls' + dir + element
                            href.href = path
                            // console.log(href)
                            ifContainer.classList.add('iframe')
                            let h2p = document.createElement('p')
                            h2p.classList.add('ifh2')
                            h2p.textContent = element
                            href.appendChild(h2p)
                            ifContainer.appendChild(href)
                            ifContainer.appendChild(iframe)
                            //console.log(path)
                            iframe.src = path
                            view.appendChild(ifContainer)
                        });
                    })
                }).catch(err => {
                    console.log('错误')
                })
        }
        document.getElementById('load_html').addEventListener('click', function () {
            let pathInput = document.getElementById('path')
            if (pathInput.value == '') { return }
            document.getElementById('htmlview').innerHTML = ''
            getHtmls('/' + pathInput.value)
        })

        // inputVue=new Vue({
        //     el:'#path_browse',
        //     data:{
        //         value:null
        //     }
        // })

        vue = new Vue({
            el: '#path_browse',
            data: {
                //pathEl:document.getElementById('path'),
                value:'',
                displayState: 'none',
                fileList: [{ fileName: '......', fileType: -1 }]
            },
            created: function () {
                this.http()
            },
            methods: {
                http:function(path=''){
                    this.fileList=[{ fileName: '......', fileType: -1 }]
                    fetch('/getdirs?from='+path, { method: 'GET' })
                    .then(res => {
                        res.json().then(resData => {
                            //console.log(resData)
                            //this.fileList=resData
                            let temp = 1
                            for (let obj of resData) {
                                this.$set(this.fileList, temp, obj)
                                temp++
                            }
                            console.log(this.fileList)
                        })
                    }).catch(err => {
                        console.log('错误')
                    })
                },
                showList: function () {
                    if (this.displayState == 'none') {
                        this.displayState = 'block'
                    } else {
                        this.displayState = 'none'
                    }
                },
                selectFile: function (fileName, fileType) {
                    switch (fileType) {
                        case -1:
                            let dirArray=this.value.split('/')
                            let newDir=''
                            console.log(dirArray)
                            if(dirArray[dirArray.length-1]==''){
                                dirArray=dirArray.slice(0,dirArray.length-1)
                            }
                            dirArray=dirArray.slice(0,dirArray.length-1)
                            console.log(dirArray)
                            for(let i=0;i<dirArray.length;i++){
                                if(newDir==''){
                                    newDir=newDir+dirArray[i]
                                }else{
                                    newDir=newDir+'/'+dirArray[i]
                                }
                            }
                            this.value=newDir
                            this.http(this.value)
                            break
                        case 0:
                            //alert(fileName)
                            //this.pathEl.value=this.pathEl.value+fileName+'/
                            this.value=this.value+fileName+'/'
                            this.http(this.value)
                        break
                    }
                }
            }
        })
    </script>
</body>

</html>